<template>
  <transition name="el-zoom-in-top">
    <div v-show="show" class="pop-publish">
      <p class="title">发布文章</p>
      <main>
        <table-row label="标签：" must>
          <div class="tags">
            <p
                class="tag"
                v-for="(tag,index) in tags"
                :key="tag+index"
                @click="clickTag(index)"
                :class="{checked: tagsOn.includes(index)}"
            >{{ tag }}</p>
          </div>
        </table-row>
<!--        <row label="封面：">-->
<!--          -->
<!--        </row>-->
        <table-row label="简要描述：" must>
          <el-input
              v-model="description"
              type="textarea"
              :rows="4"
              maxlength="100"
              placeholder="填写简要描述"
          />
          <p class="des-limit">{{ description.length }}/{{ desLimit }}</p>
        </table-row>
        <table-row>
          <el-button plain @click="popShow">取消</el-button>
          <el-button type="primary" @click="submit">确认并发布</el-button>
        </table-row>
      </main>
    </div>
  </transition>
</template>

<script>
import tableRow from "@/components/table-row";

export default {
  name: "pop-publish",
  components: {tableRow},
  data() {
    return {
      show: false,
      tags: ['前端', '后端', 'Android', 'iOS', '人工智能', '开发工具', '代码人生', '阅读'],
      tagsOn: [],
      tagLimit: 3,
      description: '',
      desLimit: 100
    }
  },
  methods: {
    popShow() {
      this.show = !this.show
    },
    clickTag(tagIndex) {
      let index = this.tagsOn.indexOf(tagIndex)
      if(index > -1){
        // 如果已经是选中状态，则取消选中
        this.tagsOn.splice(index,1)
      }else{
        if (this.tagsOn.length < this.tagLimit) {
          this.tagsOn.push(tagIndex)
        } else {
          this.$message({
            message: '最多选取三个标签',
            type: 'warning'
          });
        }
      }

    },
    submit() {
      const params = {
        authorId: this.userInfo.userId,
        author: this.userInfo.username,
        title: '',
        description: this.description,
        content: '',
        poster: '',
        tags: this.tags.filter((n,index)=>{if(this.tagsOn.includes(index)) return n})
      }
      this.$emit('submit',params)
    }
  }
}
</script>

<style lang="less" scoped>
.pop-publish {
  border: 1px solid #ddd;
  background-color: #fff;
  width: 650px;
  position: fixed;
  right: 0;
  top: 50px;

  .title {
    font-size: 20px;
    padding: 20px;
    border-bottom: 1px solid #ddd;
  }

  main {
    padding: 20px;
    .table-row:nth-child(n+2) {
      margin-top: 20px;
    }
  }
}

.tags {
  display: flex;
  flex-wrap: wrap;
  width: 400px;
  p {
    margin-right: 10px;
    color: #86909c;
    background-color: #f4f5f5;
    .size(90px,30px);
    line-height: 30px;
    text-align: center;
    cursor: pointer;
  }

  p:nth-child(4n) {
    margin-right: 0;
  }

  p:nth-child(n+5) {
    margin-top: 10px;
  }
}
.checked{
  background-color: #e8f3ff!important;
  color: #1D7DFA!important;
}
.des-limit{
  margin-top: 2px;
  text-align: right;
  font-size: 12px;
  color: #666;
}
/deep/ .el-textarea {
  width: 450px;
}
/deep/ .el-textarea__inner{
  font-size: 16px;

}
</style>